<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script src="../script/vue.js"></script>
<body>
<component id="nameList">
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="findName">搜索</button>
    <button @click="ageSort">年龄排序</button>
    <button @click="reSort">重置</button>
    <button @click="idCardSort">身份证排序</button>
    <li v-for="person in personList" :key="person.idCardNumber">
        {{person.name}} -- {{person.age}}--{{person.idCardNumber}}
    </li>
</component>

</body>
<script>
    Vue.config.devtools = true
    let data = [
        {'name': '张三', 'age': 18, 'idCardNumber': '360122199590945252'},
        {'name': '李四', 'age': 19, 'idCardNumber': '360122199590942462'},
        {'name': '王五', 'age': 20, 'idCardNumber': '360122199590945246'},
        {'name': '赵六', 'age': 15, 'idCardNumber': '360122199590945325'}
    ];
    let vue = new Vue({
        el: '#nameList',
        data: {
            name: '',
            personList: data,
        },
        methods: {
            findName() {
                let name = this.name.trim();
                let nameList = [];
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                        nameList.push(data[i]);
                    }
                }
                console.log(nameList);
                this.personList = nameList;
            },
            ageSort() {
                this.personList = this.personList.sort(function (a, b) {
                    return a.age - b.age;
                })
            },
            reSort() {
                this.personList = data;
            },
            idCardSort() {
                this.personList = this.personList.sort(function (a, b) {
                    return a.idCardNumber - b.idCardNumber;
                })
            }
        }
    });
</script>
</html>